<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 实验室管理系统</el-breadcrumb-item>
                <el-breadcrumb-item>实验室报修信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-tabs type="border-card" v-model="state">
            <el-tab-pane name="0" label="所有实验室报修信息">
                <div class="handle-box">
                    <el-input v-model="select_word" placeholder="筛选关键词" style="width: 300px"></el-input>
                    <el-button type="primary" icon="search" @click="search">搜索</el-button>
                </div>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="doorNumber" label="门牌号" width="180"></el-table-column>
                    <el-table-column prop="repairItem" label="设备编号" width="180"></el-table-column>
                    <el-table-column prop="faultPhenomenon" label="故障现象" width="180"></el-table-column>
                    <el-table-column prop="studentName" label="报修人姓名" width="180"></el-table-column>
                    <el-table-column prop="phoneNumber" label="电话"></el-table-column>
                    <el-table-column prop="repairStatus" label="报修状态" width="180"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="150">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="danger"
                                @click="delOne(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane name="1" label="未修" tab-click="search1">
                <el-table ref="tableData1" :data="tableData1"  style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="doorNumber" label="门牌号" width="180"></el-table-column>
                    <el-table-column prop="repairItem" label="设备编号" width="180"></el-table-column>
                    <el-table-column prop="faultPhenomenon" label="故障现象" width="180"></el-table-column>
                    <el-table-column prop="studentName" label="报修人姓名" width="180"></el-table-column>
                    <el-table-column prop="phoneNumber" label="电话"></el-table-column>
                    <el-table-column prop="repairStatus" label="报修状态" width="180"></el-table-column>
                    <el-table-column label="操作" fixed="right" width="150px">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="haverepair(scope.$index, scope.row)">维修</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog title="维修登记" :visible.sync="dialogFormVisible">
                    <el-form :model="form"  :rules="rules"  ref="form">
                        <el-form-item label="维修人" :label-width="formLabelWidth">
                            <el-input v-model="form.repairPerson"></el-input>
                        </el-form-item>
                        <el-form-item label="门牌号" :label-width="formLabelWidth">
                            <el-input v-model="form.doorNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="设备名称" :label-width="formLabelWidth">
                            <el-input v-model="form.equipmentName"></el-input>
                        </el-form-item>
                        <el-form-item label="维修方式" :label-width="formLabelWidth">
                            <el-input v-model="form.repairMethod"></el-input>
                        </el-form-item>
                        <el-form-item label="维修结果" :label-width="formLabelWidth">
                            <el-select v-model="form.repairResult" placeholder="请选择活动区域">
                                <el-option label="成功" value="成功"></el-option>
                                <el-option label="失败" value="失败"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submitForm">确 定 提 交</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
            <el-tab-pane name="2" label="已修">
                <el-table ref="singleTable" :data="tableData2"style="width: 100%">
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column prop="doorNumber" label="门牌号" width="180"></el-table-column>
                    <el-table-column prop="repairItem" label="维修物件" width="180"></el-table-column>
                    <el-table-column prop="faultPhenomenon" label="故障现象" width="180"></el-table-column>
                    <el-table-column prop="studentName" label="报修人姓名" width="180"></el-table-column>
                    <el-table-column prop="phoneNumber" label="电话"></el-table-column>
                    <el-table-column prop="repairStatus" label="报修状态" width="180"></el-table-column>
                    <el-table-column label="操作"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                currentRow: null,
                dialogFormVisible:false,
                select_word:'',
                state:'0',
                formLabelWidth: '100px',
                tableData: [{
                    doorNumber: '',
                    repairItem: '',
                    faultPhenomenon: '',
                    studentName: '',
                    phoneNumber: '',
                    repairStatus: '',
                }],
                tableData1: [{
                    doorNumber: '',
                    repairItem: '',
                    faultPhenomenon: '',
                    studentName: '',
                    phoneNumber: '',
                    repairStatus: '',
                }],
                tableData2: [{
                    doorNumber: '',
                    repairItem: '',
                    faultPhenomenon: '',
                    studentName: '',
                    phoneNumber: '',
                    repairStatus: '',
                }],
                form: [{
                    repairPerson:'',
                    doorNumber:'',
                    equipmentName:'',
                    repairMethod:'',
                    repairResult:'',
                }],
                rules: {
                    repairPerson: [
                        { required: true, message: '请输入设备型号', trigger: 'blur' },
                    ],
                    doorNumber: [
                        { required: true, message: '请输入设备名称', trigger: 'blur' },
                    ],
                    equipmentName: [
                        { required: true, message: '请输入设备品牌', trigger: 'blur' },
                    ],
                    repairMethod: [
                        { required: true, message: '请输入参数信息', trigger: 'blur' },
                    ],
                    repairResult: [
                        { required: true, message: '请输入设备品牌', trigger: 'change' },
                    ],
                }
            };
        },
        created(){
            this.getData();
            this.getData1();
            this.getData2();
        },
        methods: {
            getData(){
                this.$axios.get('text/repairlab/query').then((res) => {
                    this.tableData= res.data.data;
                })
            },
            getData1(){
                this.$axios.get('text/repairlab/queryfuzzy?doorNumber='+'未修').then((res) => {
                    this.tableData1= res.data.data;
                })
            },
            getData2(){
                this.$axios.get('text/repairlab/queryfuzzy?doorNumber='+'已修').then((res) => {
                    this.tableData2= res.data.data;
                })
            },
            search(select_word){
                this.$axios.get('text/repairlab/queryfuzzy?doorNumber='+this.select_word).then((res) => {
                    this.tableData= res.data.data;
                })
            },
            delOne(index, row) {
                this.$axios.delete('text/repairlab/deletebydoornumber?'+ 'doorNumber=' + row.doorNumber
                ).then((res) => {
                    this.getData();
                    this.$message.info('删除成功');
                })
            },


            haverepair(index , row){
                this.dialogFormVisible=true;
                this.$axios.put('text/repairlab/updatabyuuid?' +
                    "doorNumber=" + row.doorNumber+
                    "&repairItem=" + row.repairItem+
                    "&faultPhenomenon=" + row.faultPhenomenon+
                    "&studentName=" + row.studentName+
                    "&phoneNumber=" + row.phoneNumber+
                    "&repairStatus=" + '已修'
                ).then((res) =>{
                    this.dialogFormVisible=true;
                })
            },
            submitForm() {
                    this.$axios.post('text/repair/insertbyuuid?' +
                        'repairPerson=' + this.form.repairPerson +
                        "&doorNumber=" + this.form.doorNumber+
                        "&equipmentName=" + this.form.equipmentName+
                        "&repairMethod=" + this.form.repairMethod+
                        "&repairResult=" + this.form.repairResult
                    ).then((res) => {
                        this.getData();
                        this.getData1();
                        this.getData2();
                    })
                this.dialogFormVisible=false;
            } ,


            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        }
    }


</script>

<style scoped>
    .handle-box{
        margin-bottom: 20px;
    }
    .handle-select{
        width: 20px;
    }
    .handle-input{
        width: 300px;
        display: inline-block;
    }
</style>
